<template>
	<view class="container">
		<!--banner-->
		<view class="fui-banner-box">
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="5000"
				:duration="150"
				class="fui-banner-swiper"
				:circular="true"
				previous-margin="60rpx"
				next-margin="60rpx"
				@change="change"
			>
				<swiper-item v-for="(item, index) in banner" :key="index" class="fui-banner-item">
					<image
						:src="item"
						class="fui-slide-image"
						:class="[current != index ? 'fui-banner-scale' : '']"
						mode="scaleToFill"
						lazy-load
						@tap="detail"
					/>
				</swiper-item>
			</swiper>
		</view>
		<!--banner-->

		<!--headlines-->
		<view class="fui-rolling-news list-item">
			<iconfont className="icon-sousuo" size="13" color="#999"></iconfont>
			<swiper :vertical="true" :autoplay="true" :circular="true" :interval="4000" class="fui-swiper">
				<swiper-item v-for="(item, index) in headlines" :key="index" class="fui-swiper-item">
					<view class="fui-news-item">{{ item }}</view>
				</swiper-item>
			</swiper>
		</view>
		<!--headlines-->
		<!--classify-->
		<view class="fui-classify-box">
			<view class="fui-classify-item" v-for="(item, index) in classify" :key="index" @tap="more" :data-key="item.name">
				<image :src="item.img" class="fui-classify-img" lazy-load/>
				<view class="fui-classify-name">{{ item.name }}</view>
			</view>
		</view>
		<!--classify-->
		<view class="fui-spike-box">
			<view class="fui-spike-title list-item">限时秒杀</view>
			<!--商品列表-->
			<swiper
				:indicator-dots="false"
				:autoplay="true"
				:interval="5000"
				:duration="400"
				:circular="true"
				:display-multiple-items="2"
				:vertical="true"
				class="fui-spike-swiper"
			>
				<swiper-item v-for="(item, index) in productList" :key="index">
					<view class="fui-pro-item list-item" hover-class="hover" :hover-start-time="150" @tap="detail">
						<image :src="item.img " class="fui-pro-img" mode="widthFix" />
						<view class="fui-pro-content">
							<view class="fui-pro-tit">{{ item.name }}</view>
							<view class="fui-pro-btmbox">
								<view class="fui-pro-price">
									<text class="fui-sale-price">￥{{ item.sale }}</text>
									<text class="fui-factory-price">￥{{ item.factory }}</text>
								</view>
								<view class="fui-countdown">
									<view class="fui-countdown-text">剩余</view>
									<fui-countdown :time="item.time" color="#e41f19" borderColor="#e41f19" colonColor="#e41f19" scale></fui-countdown>
									<view class="fui-countdown-text">结束</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!--商品列表-->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banner: ['../../static/images/product/1.jpg', '../../static/images/product/2.jpg', '../../static/images/product/3.jpg'],
			classify: [
				{
					img: '../../static/images/product/1.jpg',
					name: '空调'
				},
				{
					img: '../../static/images/product/5.jpg',
					name: '冰洗'
				},
				{
					img: '../../static/images/product/4.jpg',
					name: '热水器'
				},
				{
					img: '../../static/images/product/3.jpg',
					name: '床'
				},
				{
					img: '../../static/images/product/2.jpg',
					name: '精品'
				}
			],
			current: 0,
			headlines: ['苹果XR对比华为Mate20你会选择谁', '格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气', '耐克没进前十，今年Q1全球受欢迎品牌榜'],
			productList: [
				{
					img: '../../static/images/product/1.jpg',
					name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
					sale: 599,
					factory: 899,
					time: 2000
				},
				{
					img: '../../static/images/product/2.jpg',
					name: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
					sale: 29,
					factory: 69,
					time: 1500
				},
				{
					img: '../../static/images/product/3.jpg',
					name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
					sale: 299,
					factory: 699,
					time: 1800
				},
				{
					img: '../../static/images/product/4.jpg',
					name: '百雀羚套装女补水保湿护肤品',
					sale: 1599,
					factory: 2899,
					time: 1000
				},
				{
					img: '../../static/images/product/5.jpg',
					name: '百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋',
					sale: 599,
					factory: 899,
					time: 3000
				},
				{
					img: '../../static/images/product/11.jpg',
					name: '短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤',
					sale: 599,
					factory: 899,
					time: 2400
				},
				{
					img: '../../static/images/product/22.jpg',
					name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜',
					sale: 599,
					factory: 899,
					time: 1600
				},
				{
					img: '../../static/images/product/33.jpg',
					name: '德国DMK进口牛奶',
					sale: 29,
					factory: 69,
					time: 1200
				},
				{
					img: '../../static/images/product/1.jpg',
					name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
					sale: 299,
					factory: 699,
					time: 1800
				},
				{
					img: '../../static/images/product/1.jpg',
					name: '百雀羚套装女补水保湿护肤品',
					sale: 1599,
					factory: 2899,
					time: 2600
				}
			]
		};
	},
	methods: {
		change: function(e) {
			this.current = e.detail.current;
		},
		detail: function() {
			uni.navigateTo({
				url: '/pages/template/mall/productDetail/productDetail'
			});
		},
		more: function(e) {
			let key = e.currentTarget.dataset.key || '';
			uni.navigateTo({
				url: '/pages/template/mall/productList/productList?searchKey=' + key
			});
		}
	}
};
</script>

<style>
.container {
	padding-bottom: 100rpx;
	box-sizing: border-box;
}

/*banner*/

.fui-banner-box {
	width: 100%;
	padding-top: 20rpx;
	box-sizing: border-box;
	background: #fff;
}

.fui-banner-swiper {
	width: 100%;
	height: 240rpx;
}

.fui-banner-item {
	padding: 0 16rpx;
	box-sizing: border-box;
}

.fui-slide-image {
	width: 100%;
	height: 240rpx;
	display: block;
	border-radius: 12rpx;
	/* transition: all 0.1s linear; */
}

.fui-banner-scale {
	transform: scaleY(0.9);
	transform-origin: center center;
}

/* #ifdef MP-WEIXIN */
.fui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.fui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.fui-banner-swiper .wx-swiper-dot-active::before {
	background: #fff;
}

.fui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .fui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .fui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .fui-banner-swiper .uni-swiper-dot-active::before {
	background: #fff;
}

>>> .fui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */
/*banner*/

/*headlines*/

.fui-rolling-news {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	background: #fff;
}

.fui-rolling-news::after {
	left: 0;
}

.fui-swiper {
	margin-left: 8rpx;
	font-size: 28rpx;
	height: 80rpx;
	flex: 1;
}

.fui-swiper-item {
	display: flex;
	align-items: center;
}

.fui-news-item {
	line-height: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #555;
}

/*headlines*/

/*classify*/

.fui-classify-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;
	background-color: #fff;
}

.fui-classify-item {
	width: 20%;
	text-align: center;
}

.fui-classify-img {
	width: 88rpx;
	height: 88rpx;
	background-color: #ccc;
	border-radius: 50%;
}

.fui-classify-name {
	font-size: 26rpx;
	line-height: 26rpx;
	padding-top: 8rpx;
	color: #555;
	white-space: nowrap;
}

/*classify*/

/*spike*/

.fui-spike-box {
	background: #fff;
	margin-top: 20rpx;
}

.fui-spike-title {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}

.fui-spike-title::after {
	left: 0;
}

.fui-spike-swiper {
	min-height: 440rpx;
}

.fui-pro-item {
	display: flex;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	position: relative;
}

.fui-pro-item::after {
	left: 240rpx;
}

.fui-pro-img {
	width: 220rpx;
	height: 220rpx;
	display: block;
	flex-shrink: 0;
	border-radius: 12rpx;
}

.fui-pro-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.fui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fui-pro-btmbox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fui-sale-price {
	font-size: 34rpx;
	font-weight: 500;
	color: #e41f19;
}

.fui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.fui-countdown {
	display: flex;
	align-items: center;
}

.fui-countdown-text {
	padding: 0 8rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #555;
}

/*spike*/
</style>
